<!doctype html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <th:block th:include="/A0723/include :: header('任务大厅')"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">任务大厅</h1>
    <div class="head_btn">
        <a href="toTasksRecords/1">
            <button type="button" class="mui-btn mui-btn-blue wwc">未完成</button>
        </a>
        <a href="toTasksRecords/2">
            <button type="button" class="mui-btn mui-btn-blue wsh">未审核</button>
        </a>
        <a href="toTasksRecords/3">
            <button type="button" class="mui-btn mui-btn-blue ywc">已完成</button>
        </a>
    </div>
</header>
<div class="mui-content">

    <!-- nav -->

      <ul id="type" class="nav flex"></ul>



    <!-- 任务列表 -->
    <!-- 抖音 -->
    <ul class="task_list">

    </ul>


    <th:block th:include="/A0723/include :: menu"/>
</div>

<th:block th:include="/A0723/include :: footer"/>
<th:block th:include="/A0723/include :: common"/>
<script type="text/javascript">

    $(function () {
        getPlatformType()
        getTaskByType(0)
        mui('body').on('tap', 'a', function () {
            window.top.location.href = this.href;
        });

    })


    $("body").on("click", '.nav li', function () {
        var divShow = $(".task_list");
        if (!$(this).hasClass('active')) {
            var index = $(this).index();
            getTaskByType($(this)[0].id)
            $(this).addClass('active').siblings('li').removeClass('active')
            $(divShow[index]).show().siblings('.task_list').hide()
        }
    })


    //跳转任务详情
    function taskInfo(taskId) {
        window.location.href = ctx+'front/toTasksInfo/' + taskId
    }

    /**
     * 获取平台类型列表
     */
    function getPlatformType() {
        mui.ajax(ctx+'front/platformType', {
            dataType: 'json',//服务器返回json格式数据
            type: 'get',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/json'},
            success: function (res) {
                let data = res.data;
                var str = '';



                $.each(data, function (i, d) {
                    str += '<li id="' + d.id + '">\n' +
                        '            <p><img src="' + d.icon + '" alt=""></p>\n' +
                        '            <div>' + d.name + '</div>\n' +
                        '   </li>'
                })

                $("#type").append(str)
            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
            }
        });
    }

    /**
     * 获取平台类型列表
     */
    function getTaskByType(type) {
        mui.ajax(ctx+'front/tasks/' + type, {
            dataType: 'json',//服务器返回json格式数据
            type: 'get',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/json'},
            success: function (res) {
                let data = res.data;
                $(".task_list").html('')
                var str = '';
                $.each(data, function (i, d) {
                    str += ' <li>\n' +
                        '            <!-- 顶部 -->\n' +
                        '            <div class="top_task flex3">\n' +
                        '                <div class="left_messg">\n' +
                        '                    <h4 class="task_list_h4 flex"><span></span></h4>\n' +
                        '                    <div class="flex">\n' +
                        '                        <img src="'+d.platformType.icon+'" alt="">\n' +
                        '                        <div>\n' +
                        '                            <p>任务名称：'+d.name+'</p>\n' +
                        '                            <p>任务类型：'+formatterWay(d.type)+'</p>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '                <!-- 左边数字 -->\n' +
                        '                <div class="left_num"><span>' + d.amount + '</span>元</div>\n' +
                        '            </div>\n' +
                        '            <!-- 线条 -->\n' +
                        '            <div class="line"></div>\n' +
                        '            <!-- 底部 -->\n' +
                        '            <div class="bot_task flex3">\n' +
                        '                <div>发布时间：<br>' + d.createTime + '</div>\n' +
                        '                <div class="flex">\n' +
                        '                    <button type="button" onclick="receiveTask(' + d.id + ')" class="mui-btn mui-btn-blue">接取任务</button>\n' +
                        '                    <button type="button" onclick="taskInfo(' + d.id + ')" class="mui-btn mui-btn-blue">任务详情</button>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '        </li>'
                })
                $(".task_list").append(str)
            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
            }
        });
    }

</script>
</body>

</html>
